{% extends 'adminuser/base_admin.html' %}

{% block admin_title %}用户管理{% endblock %}

{% block admin_content %}
<div class="d-flex justify-content-between mb-3">
    <h5>用户总数: {{ total_users }}</h5>
    <div>
        <form class="d-flex" method="get">
            <div class="input-group me-2">
                <input type="text" name="search" class="form-control" placeholder="搜索用户..." value="{{ search_query }}">
                <button type="submit" class="btn btn-outline-primary">
                    <i class="bi bi-search"></i>
                </button>
            </div>
            <select name="role" class="form-select" onchange="this.form.submit()">
                <option value="" {% if not role %}selected{% endif %}>所有用户</option>
                <option value="admin" {% if role == 'admin' %}selected{% endif %}>管理员</option>
                <option value="banned" {% if role == 'banned' %}selected{% endif %}>已封禁</option>
            </select>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header bg-light">
        <div class="row">
            <div class="col-md-3">用户名</div>
            <div class="col-md-3">邮箱</div>
            <div class="col-md-2">注册时间</div>
            <div class="col-md-2">状态</div>
            <div class="col-md-2">操作</div>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="list-group list-group-flush">
            {% for user in page_obj %}
            <div class="list-group-item">
                <div class="row align-items-center">
                    <div class="col-md-3">
                        <div class="d-flex align-items-center">
                            <img src="{{ user.profile.avatar.url|default:'/static/img/default-avatar.png' }}" class="rounded-circle me-2" width="40" height="40" alt="{{ user.username }}">
                            <div>
                                <strong>{{ user.username }}</strong>
                                {% if user.is_staff %}
                                <span class="badge bg-primary ms-1">管理员</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">{{ user.email }}</div>
                    <div class="col-md-2">{{ user.date_joined|date:"Y-m-d" }}</div>
                    <div class="col-md-2">
                        {% if user.profile.is_banned %}
                        <span class="badge bg-danger">已封禁</span>
                        {% else %}
                        <span class="badge bg-success">正常</span>
                        {% endif %}
                    </div>
                    <div class="col-md-2">
                        <a href="{% url 'adminuser:user_detail' user_id=user.id %}" class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-eye"></i> 查看
                        </a>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="list-group-item text-center">
                <p class="text-muted my-3">没有找到符合条件的用户</p>
            </div>
            {% endfor %}
        </div>
    </div>
    <div class="card-footer">
        <nav>
            <ul class="pagination justify-content-center mb-0">
                {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page=1{% if search_query %}&search={{ search_query }}{% endif %}{% if role %}&role={{ role }}{% endif %}">首页</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if role %}&role={{ role }}{% endif %}">上一页</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#">首页</a>
                </li>
                <li class="page-item disabled">
                    <a class="page-link" href="#">上一页</a>
                </li>
                {% endif %}
                
                <li class="page-item active">
                    <span class="page-link">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
                </li>
                
                {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if role %}&role={{ role }}{% endif %}">下一页</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query }}{% endif %}{% if role %}&role={{ role }}{% endif %}">末页</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#">下一页</a>
                </li>
                <li class="page-item disabled">
                    <a class="page-link" href="#">末页</a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>

<div class="row mt-3">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">用户统计</h5>
                <div class="d-flex justify-content-between align-items-center">
                    <div>总用户数</div>
                    <span class="badge bg-primary">{{ total_users }}</span>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-2">
                    <div>管理员</div>
                    <span class="badge bg-info">{{ admin_users }}</span>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-2">
                    <div>被封禁用户</div>
                    <span class="badge bg-danger">{{ banned_users }}</span>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 